<template>
	<view>
		<tt-bar title="资产中心" leftIcon="icon-back"></tt-bar>
		<view class="assetCenterBox">
			<text class="assetTitle">账户总额</text>
			<text class="assetCount">￥{{total.toFixed(2)}}</text>
			<text class="reflectCount">可提现额 {{can_fetch.toFixed(2)}} 元</text>
			<!-- <button @tap="toTixian">提 现</button> -->
			<!-- <button class="active" @tap="chongzhi" data-url="recharge">充 值</button> -->
		</view>
		<poup ref="labelPoup" >
		</poup>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	import poup from "@/components/poup/poup.vue";
	export default {
		components: {
			ttBar,poup
		},
		data() {
			return {
				total:0,
				can_fetch:0,
				assetInfo:null
			};
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
				
			})
			
		},
		methods:{
			getData(){
				// TODO 修改id  uni.getStorageSync("selectShop").id
				API.getAssetInfoBySid(this.selectShop.id).then(res=>{
					if(res.data.code==1){
						this.assetInfo=res.data.data
						this.total=res.data.data.total;
						this.can_fetch=res.data.data.can_fetch;
					}else{
						// uni.showToast({
						// 	title: '当前账户没有绑定银行卡，暂无法体现',
						// 	icon: 'none'
						// });
					}
					
				})
			},
			toTixian(){
				if(!this.assetInfo){
					this.$refs.labelPoup.init({
						title:'错误',
						cntText:'该账户财务信息缺失，请到web端完善后再次尝试',
						cancle:''
					})
					this.$refs.labelPoup.show()
				}else{
					this.toPage({
						url:'reflect'
					})
				}
			},
			chongzhi(){
				uni.showToast({
					title: '充值功能暂未开放',
					icon: 'none'
				});
			}
		},
		onLoad() {
			this.getData()
			uni.$on("upData",()=>{
				this.getData();
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
		
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.assetCenterBox {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 130upx;

		.assetTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #222433;
			margin-bottom: 60upx;
		}

		.assetCount {
			font-size: 84rpx;
			font-weight: bold;
			color: #222433;
			margin-bottom: 70upx;
		}

		.assetCount:first-letter {
			font-size: 56upx;
		}

		.reflectCount {
			font-size: 42rpx;
			font-weight: bold;
			color: #8d88b8;
			margin-bottom: 140upx;
		}

		button {
			width: 380upx;
			height: 98upx;
			border-radius: 14rpx;
			border: solid 3rpx #ffb11a;
			line-height: 92upx;
			font-size: 42rpx;
			color: #ffb11a;
			margin-bottom: 48upx;
		}

		button:after {
			border: none;
		}
		.active{
			background-color: #ffb11a;
			color: #FFFFFF;
		}
	}
</style>
